<template>
	<view class="map-marker-page">
		<!-- 导航栏 -->
		<uni-nav-bar 
			:fixed="true" 
			:status-bar="true" 
			title="导航" 
			left-icon="left" 
			background-color="#007AFF"
			color="#ffffff"
			:border="false"
			:shadow="false"
			@clickLeft="goBack">
		</uni-nav-bar>

	<!-- 导航栏下容器 -->
	<view class="nav-container"></view>

	<!-- 地图和门店信息容器 -->
	<view class="map-store-wrapper">
		<!-- 地图区域 -->
		<view class="map-container">
		<map 
			class="map"
			:latitude="latitude"
			:longitude="longitude"
			:markers="markers"
			:circles="circles"
			:scale="14"
			:show-location="true"
			@markertap="onMarkerTap">
			<!-- 自定义信息容器 -->
			<cover-view v-if="infoWindowVisible" class="info-window-container">
				<!-- 透明遮罩层，点击时关闭信息窗口 -->
				<cover-view class="info-mask" @tap="closeInfoWindow"></cover-view>
				<!-- 信息窗口 -->
				<cover-view class="info-window" :style="infoWindowStyle" @tap.stop>
					<cover-view class="info-content">
						<cover-text class="info-text">{{ selectedMarkerAddress }}</cover-text>
					</cover-view>
					<cover-view class="info-pointer"></cover-view>
				</cover-view>
			</cover-view>
		</map>
		</view>

		<!-- 门店信息卡片 -->
		<view class="store-info-card">
			<view class="store-info-left">
				<text class="store-name">车百事汽车生活馆</text>
				<text class="store-address">山阳区人民路与解放路交叉口</text>
			</view>
			<view class="nav-btn" @click="startNavigation">
				<text class="nav-btn-text">导航</text>
			</view>
		</view>
	</view>
</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	
	// 地图中心坐标（河南理工大学）
	const latitude = ref(35.2150)
	const longitude = ref(113.2500)
	
	// 新标注点坐标（可以设置为不同的位置）
	const newMarkerLatitude = ref(35.2200)
	const newMarkerLongitude = ref(113.2550)
	
	// 信息窗口显示状态
	const infoWindowVisible = ref(false)
	const selectedMarkerId = ref(null)
	const selectedMarkerAddress = ref('')
	
	// 标记点数据
	const markerData = {
		1: {
			address: '山阳区人民路与解放路交叉口'
		},
		2: {
			address: '山阳区人民西路32号'
		}
	}
	
	// 地图标记点
	const markers = computed(() => [
		{
			id: 1,
			latitude: 35.2150,
			longitude: 113.2500,
			iconPath: '/static/椭圆 3 拷贝 2@2x.png',
			width: 24,
			height: 32
		},
		{
			id: 2,
			latitude: newMarkerLatitude.value,
			longitude: newMarkerLongitude.value,
			iconPath: '/static/组 8@2x.png',
			width: 30,
			height: 30,
			anchor: { x: 0.5, y: 1 } // 设置锚点，确保标注点底部中心对齐
		}
	])
	
	// 信息窗口样式（居中显示）
	const infoWindowStyle = computed(() => {
		return {
			position: 'absolute',
			left: '50%',
			top: '50%',
			transform: 'translate(-50%, -100%)',
			marginTop: '-60px'
		}
	})
	
	// 点击标记点事件
	const onMarkerTap = (e) => {
		const markerId = e.detail.markerId
		selectedMarkerId.value = markerId
		
		// 获取标记点对应的地址
		if (markerData[markerId]) {
			selectedMarkerAddress.value = markerData[markerId].address
			infoWindowVisible.value = true
		}
	}
	
	// 关闭信息窗口
	const closeInfoWindow = () => {
		infoWindowVisible.value = false
		selectedMarkerId.value = null
	}
	
	// 圆形范围覆盖层（淡蓝色圆形范围，以新标注点为圆心）
	const circles = computed(() => [
		{
			latitude: newMarkerLatitude.value,
			longitude: newMarkerLongitude.value,
			radius: 200, // 半径200米
			fillColor: 'rgba(135, 206, 235, 0.2)', // 淡蓝色（天蓝色），20%透明度
			strokeWidth: 1, // 边框宽度设为0
			strokeColor: 'rgba(135, 206, 235, 0.2)' ,// 边框颜色与填充色相同，使其不可见
			stroke:false
		}
	])
	
	const goBack = () => {
		uni.navigateBack()
	}
	
	// 开始导航
	const startNavigation = () => {
		// 打开地图导航
		uni.openLocation({
			latitude: latitude.value,
			longitude: longitude.value,
			name: '车百事汽车生活馆',
			address: '山阳区人民路与解放路交叉口',
			success: () => {
				console.log('打开导航成功')
			},
			fail: (err) => {
				console.log('打开导航失败', err)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.map-marker-page {
		min-height: 100vh;
		background-color: #ffffff;
	}

	.nav-container {
		height: 100px;
		background-color: #007AFF;
		width: 100%;
	}

	/* 地图和门店信息容器 */
	.map-store-wrapper {
		position: relative;
		margin: -90px 10px 0 10px;
		padding: 15px 15px 0 15px;
		border-radius: 10px;
		background-color: #ffffff;
		height: 470px;
	}

	/* 地图容器 */
	.map-container {
		position: relative;
		width: 100%;
		height: 470px;
	}

	.map {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	/* 信息窗口容器 */
	.info-window-container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
	}
	
	/* 透明遮罩层 */
	.info-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
	}
	
	/* 自定义信息窗口 */
	.info-window {
		position: absolute;
		display: flex;
		flex-direction: column;
		align-items: center;
		pointer-events: auto;
	}
	
	/* 信息内容 */
	.info-content {
		background-image: url('/static/矩形 5 拷贝@2x.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		padding: 12px 20px;
		min-width: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	/* 信息文本 */
	.info-text {
		font-size: 14px;
		color: #333333;
		text-align: center;
		line-height: 1.5;
	}
	
	/* 信息窗口指针（向下的小三角形） */
	.info-pointer {
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 10px solid transparent;
		/* 如果背景图片已包含指针，可以设置为透明或移除 */
		margin-top: -1px;
		position: relative;
		z-index: 1;
	}

	/* 门店信息卡片 */
	.store-info-card {
		background-color: #ffffff;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #e5e5e5;
		margin-top: 30px;
	}

	.store-info-left {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.store-name {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.store-address {
		font-size: 14px;
		color: #666666;
	}

	.nav-btn {
		background-image: url('/static/矩形 10 拷贝.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		border-radius: 20px;
		padding: 10px 24px;
		flex-shrink: 0;
		margin-left: 15px;
	}

	.nav-btn-text {
		font-size: 16px;
		color: #ffffff;
		font-weight: 500;
	}
</style>

<style lang="scss">
	/* 全局样式，用于覆盖组件内部样式 */
	.uni-navbar__content {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar--border {
		border-bottom: none !important;
		border: none !important;
	}
	
	.uni-navbar__header {
		border-bottom: none !important;
		border: none !important;
	}
</style>

